<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-10 11:11:53
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
{%extends "root.html" %}


<body>
	{% block mainbody %}
	<style type="text/css">
		.body {
			min-height: calc(100vh - 110px);
		}

		.body>main {
			width: 100vw;
		}

		.containerOf404 {
			/* height: calc(80vh - 80px); */
			height: calc(85vh - 80px);
			/* margin-top: 30px; */
			background-color: #FFFFFF;
			padding: 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.notfound {
			max-width: 500px;
			max-height: 500px;
			width: 90vw;
			height: 90vw;
			background-image: url(/static/img/404.png);
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-size: cover;
			border-radius: 0 10px 10px 0;
			padding: 0px;
		}

		.text {
			font-size: 40px;
			margin: 30px;
		}

		@media only screen and (max-width:768px) {
			.body {
				min-height: 100vh
			}

			.containerOf404 {
				height: 85vh;
			}
		}
	</style>
	<div class="containerOf404">
		<div class="notfound"></div>
		<div class="text">404 Not Found</div>
	</div>
	{% endblock %}
</body>

</html>